<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
	
<h:head>
	<meta content="text/html" charset="UTF-8"></meta>
	<title>Esse é o meu titulo</title>
	<link rel="stylesheet"
		href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></link>
	<script
		src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
		
		<style type="text/css">
			th{
				background-color: rgb(240,240,240);
			}
			td{
				cursor:pointer;
			}
		</style>
</h:head>

<h:body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="well text-center">
					<h2>Central de Cursos à Distância</h2>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-12">
				<h:form>
					<fieldset>
						<legend>Cursos / Cadastro</legend>
						<div class="row">
							<div class="col-md-9">
								<div class="form-group">
									<h:outputLabel value="Nome do Curso" for="txtCursoNome" />
									<h:inputText value="#{cursoBean.curso.nome}" id="txtCursoNome"
										class="form-control" />
								</div>
							</div>

							<div class="col-md-3">
								<div class="form-group">
									<h:outputLabel value="Sigla do Curso" for="txtCursoSigla" />
									<h:inputText value="#{cursoBean.curso.sigla}"
										id="txtCursoSigla" class="form-control" />
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<h:commandButton value="Adicionar curso"
										class="btn btn-primary" action="#{cursoBean.adicionaCurso}" />
								</div>
							</div>
						</div>
					</fieldset>
					<div class="row">
						<div class="col-md-12">
							<h:dataTable value="#{cursoBean.cursos}" var="curso"
								rendered="#{not empty cursoBean.cursos}" class="table">
								<f:facet name="header">Lista de Cursos</f:facet>

								<h:column>
									<f:facet name="header">Sigla</f:facet>
										#{curso.sigla}
									</h:column>

								<h:column>
									<f:facet name="header">Nome</f:facet>
										#{curso.nome}
									</h:column>
							</h:dataTable>
						</div>
					</div>
				</h:form>
			</div>
		</div>

	</div>
</h:body>

</html>